<template>
  <div class="app-container"
       style="min-height: 100%"
  >
    <el-card class="box-card" style="margin-top:0">
      <div slot="header" class="clearfix">
        <span>筛选下载</span>
      </div>
      <div class="text item">
        <el-select
          v-model="examUuid"
          placeholder="请选择考试"
          clearable
          style="width: 220px;float: left;margin:0 10px 20px 0;"
          @change="changeExamHandle"
        >
          <el-option
            v-for="(item, index) in examList"
            :key="index"
            :label="item.name"
            :value="item"
          ></el-option>
        </el-select>
        <el-button style="float: left;" type="primary" @click="handleExport">开始下载</el-button>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top:20px;">
      <div slot="header" class="clearfix">
        <span>上传Excel</span>
      </div>
      <div class="text item">
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="1"
          name="multipartFile"
          accept=".xlsx"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
        >
          <el-input
            slot="trigger"
            v-model="fileName"
            placeholder="文件名"
            disabled
            style="width: 220px;margin-right: 10px;"
          />
          <el-button :loading="upload.isUploading" slot="trigger" type="primary" class="center-btn">开始上传</el-button>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xlsx”格式文件！</div>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";
  import {getExamList} from "@/api/toolsystem/printScale";

  export default {
    name: "printScale",
    data() {
      return {
        isChangeBtn: true,
        // 查询参数
        examUuid: null, // 考试id
        examName: null, // 考试名称
        fileName: null, // 文件名
        examList: [],
        // 上传Excel参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/tools-miscellaneous/read"
        },
      }
    },
    created() {
      this.getExamList()
    },
    methods: {
      changeExamHandle(val){
        this.examName = val.name
        this.examUuid = val.examUuid
      },
      // 获取考试列表
      getExamList() {
        getExamList().then(response => {
          console.log(response)
          this.examList = response
        }).catch(error => {
          console.log(error)
        })
      },
      // 开始下载按钮
      handleExport() {
        if (!this.examUuid) {
          return this.msgInfo('请选择考试')
        }
        this.$confirm(
          '是否确认下载',
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.download(
              `/tools-miscellaneous/paperCount/export/${this.examUuid}`,
              {},
              `${this.examName}-印量表.xlsx`
            );
          })
          .catch(() => {
            this.msgInfo("取消下载");
            this.hasClass[item] = false
          });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        console.log(event)
        this.fileName = file.name.split('.')[0];
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.download(
          '/tools-miscellaneous/export',
          {},
          `${this.fileName}汇总.xlsx`
        );
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
      },
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
</style>

